<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }
        .container {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 2rem;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #2c3e50;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 0.5rem;
            border: 2px solid #e2e8f0;
            border-radius: 4px;
            font-size: 1rem;
        }
        input[type="radio"],
        input[type="checkbox"] {
            margin-right: 0.5rem;
        }
        .radio-group,
        .checkbox-group {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        button {
            width: 100%;
            padding: 0.75rem;
            background: #4299e1;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background: #3182ce;
        }
        .error {
            color: #e53e3e;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .success-message {
            color: #38a169;
            text-align: center;
            margin-top: 1rem;
            display: none;
        }
        .error-message {
            color: #e53e3e;
            text-align: center;
            margin-top: 1rem;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户注册</h1>
        <form id="registrationForm" onsubmit="submitForm(event)">
            <div class="form-group">
                <label for="fullName">姓名</label>
                <input type="text" id="fullName" name="fullName" required>
            </div>
            
            <div class="form-group">
                <label for="email">电子邮件</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            
            <div class="form-group">
                <label for="birthday">生日</label>
                <input type="date" id="birthday" name="birthday" required>
            </div>
            
            <div class="form-group">
                <label>性别</label>
                <div class="radio-group">
                    <div>
                        <input type="radio" id="male" name="gender" value="Male" required>
                        <label for="male">男</label>
                    </div>
                    <div>
                        <input type="radio" id="female" name="gender" value="Female">
                        <label for="female">女</label>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="profession">职业</label>
                <select id="profession" name="profession" required>
                    <option value="">请选择职业</option>
                    <option value="Developer">开发者</option>
                    <option value="Designer">设计师</option>
                    <option value="Manager">经理</option>
                    <option value="Student">学生</option>
                    <option value="Other">其他</option>
                </select>
            </div>
            
            <div class="form-group">
                <div class="checkbox-group">
                    <input type="checkbox" id="married" name="married">
                    <label for="married">已婚</label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="note">备注</label>
                <textarea id="note" name="note" rows="4"></textarea>
            </div>
            
            <button type="submit">注册</button>
        </form>
        <div id="successMessage" class="success-message">注册成功！</div>
        <div id="errorMessage" class="error-message">注册失败，请重试。</div>
    </div>

    <script>
        function submitForm(event) {
            event.preventDefault();
            
            const form = document.getElementById('registrationForm');
            const formData = new FormData(form);
            const data = {};
            formData.forEach((value, key) => {
                if (key === 'married') {
                    data[key] = value === 'on';
                } else {
                    data[key] = value;
                }
            });

            fetch('/api/users/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('注册失败');
                }
                return response.json();
            })
            .then(data => {
                document.getElementById('successMessage').style.display = 'block';
                document.getElementById('errorMessage').style.display = 'none';
                form.reset();
            })
            .catch(error => {
                document.getElementById('errorMessage').style.display = 'block';
                document.getElementById('successMessage').style.display = 'none';
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>